<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>1号店注册页面</title>
</head>
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" type="text/css"/>
	<link rel="stylesheet" href="css/bootstrapValidator.css" type="text/css" />
<body>
			<iframe name="buttom" scrolling="no" marginwidth=0 marginheight=0 width=100% height=160 src="header_htl_2.html" frameborder=0></iframe>
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="page-header">
               		  <h2>请输入你的注册信息</h2>
               		</div>
				<form class="form-horizontal" method="post" action="AddUserServlet">
					
					<div class="form-group">
						<label for="username " class="col-sm-3 control-label">账号</label>
						<div class="col-sm-5">
							<input type="text" class="form-control" id="username" name="username" placeholder="请输入名字" />
						</div>
					</div>
					
					<div class="form-group ">
						<label for="password" class="col-sm-3 control-label">密码</label>
						<div class="col-sm-5">
							<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" />
						</div>
					</div>
					
					<div class="form-group">
						<label for="repassword" class="col-sm-3 control-label">确认密码</label>
						<div class="col-sm-5">
							<input type="password" class="form-control" id="repassword" name="repassword" placeholder="请输入确认密码" />
						</div>
					</div>
					
					<div class="form-group clearfix">
						<label for="captcha" class="col-sm-3 col-xs-12 control-label">请输入验证码</label>
						<div class="col-sm-3 col-xs-6">
							<input type="text" class="form-control" id="captcha" name="captcha" placeholder="请输入验证码" />
						</div>
						<div class="col-sm-2 col-xs-6">
							<img alt="图片缺失" src="CodeServlet" title="看不清？请点击" name="captchaimg" id="captchaimg"/>
						</div>
					</div>
					
					<div class="form-group clearfix">
							<input type="submit" class="col-sm-2 col-sm-offset-3 col-xs-2 col-xs-offset-2 btn btn-primary" />
							<input type="reset" class="col-sm-2 col-sm-offset-1 col-xs-2 col-xs-offset-1 btn btn-warning" id="reset" />
					</div>
				</form>
			</div>
		</div>
	</div>
			<iframe name="buttom" scrolling="no" marginwidth=0 marginheight=0 width=100% height=120 src="buttom_htl.html" frameborder=0></iframe>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
        <script type="text/javascript" src="js/bootstrapValidator.js" ></script>
		<script>
			//初始化表单验证
		    $(document).ready(function() {
		        startValidator();
		    });
			//校验重置重点，   当点击重置时隐藏时销毁验证再重新加载验证
			$('#reset').click(function(){
				 $("form").data('bootstrapValidator').destroy();
		      	  $('form').data('bootstrapValidator', null);
		      	  startValidator();
			}); 
			
			//开始这是验证函数
		    function startValidator(){
		        $('form').bootstrapValidator({
		　　　　　　　　message: 'This value is not valid',
		            　	feedbackIcons: {
		        　　　　　　	　　valid: 'glyphicon glyphicon-ok',
		        　　　　　　	　　invalid: 'glyphicon glyphicon-remove',
		        　　　　　　	　　validating: 'glyphicon glyphicon-refresh'
		            　　　　　　　　   },
		            fields: {
		                username: {
		                    message: '用户名验证失败',
		                    validators: {
		                        notEmpty: {
		                            message: '用户名不能为空'
		                        },
		                        stringLength: {
		                            min: 6,
		                            max: 12,
		                            message: '用户名至少为6位，最大不能超过12位'
		                        },
		                        regexp: {
		                            regexp: /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/,
		                            message: '用户名只能以字母开头，且以字母、数字、点和下划线组成。'
		                        }
		                        
		                    }
		                },
		                password: {
		                    validators: {
		                        notEmpty: {
		                            message: '邮箱地址不能为空'
		                        },
		                        regexp: {
		                        	regexp: /^[a-zA-Z]\w{5,17}$/,
		                            message: '密码只能以字母开头，长度在6~18之间，只能包含字符、数字和下划线。'
		                        }
		                    }
		                },
		                repassword: {
		                    validators: {
		                        notEmpty: {
		                            message: '确认密码不能为空'
		                        },
		                        identical: {
		                        	field: 'password',
		                        	message: '两次密码输入不正确'
		                        }
		                    }
		                },
		                captcha: {
		                	validators: {
		                        callback: {
		                            message: '你输入的验证码错误',
		                            callback: function(value, validator) {
		                          			return ajaxTest(value);
		                            }
		                        }
		                    }
		                }
		            }
		        });
    };
    
    function ajaxTest(value) {
    	var check_res;
    	//发送ajax请求
		$.ajax({
			type:"post",  //提交方式，post或get
			url:"CheckCode",    //提交的目的地
			async:false, 	//同步或者异步方式，true表示异步，异步方式不会阻塞当前网页,但是会造成处理已经完成但是请求还没完成
			data:{code: value},  //提交的请求参数，是键值对，用：隔开
			datatype:'text',     //返回值的形式，常用text，json，xml
			success:function(redata){ //请求成功的回调函数，参数是响应的返回值
				check_res = redata;
			}
		});
		return check_res == "ok";
    };
    
    //添加onclick事件，刷新验证码
    var num = 0;
    $('#captchaimg').click(function() {
			num++;
			this.src='CodeServlet?num=' + num;
			$('#captcha').data('bootstrapValidator').destroy();
	       $('#captcha').data('bootstrapValidator', null);
	});
		</script>
</body>
</html>